<template>
  <PageWrapper title="关注网站更新" contentBackground headerSticky>
    <div class="p-4">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 enter-y">
        <template v-for="item in movieList" :key="item.id">
          <CareSite :mov="item" />
        </template>
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { PageWrapper } from '@/components/Page';
  import CareSite from './components/CareSite.vue';
  import { getCareSiteViewListApi, getCareDetailApi } from '@/api/hopefly/api';

  const movieList = ref<any>([]);

  onMounted(async () => {
    const data = await getCareSiteViewListApi({ page: 1, pageSize: 10 });
    console.log(data);
    movieList.value = data.items;
    movieList.value = movieList.value.map((item: any) => ({ ...item, loading: true }));
    //按顺讯请求列表详情数据
    for (let i = 0; i < movieList.value.length; i++) {
      const item = movieList.value[i];
      const index = i;
      const imageUrl = await fetch('/api' + getCareDetailApi + '/' + item.id)
        .then((response) => response.blob())
        .then((blob) => {
          // Create a URL for the Blob object
          const imageUrl = URL.createObjectURL(blob);

          // Set the src attribute to the Blob URL
          // loading.value = false;
          console.log(imageUrl);
          // setTimeout(() => {
          //   chartRef.value?.setAttribute('src', imageUrl);
          // }, 0);
          return imageUrl;
        })
        .catch((error) => console.error('Error fetching image:', error));
      movieList.value[index] = { ...movieList.value[index], imageUrl, loading: false };
    }
  });
</script>
